<template>
  <div class="order">
    <el-date-picker
            clearable
            v-model="eatTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择用餐日期">
    </el-date-picker>
    <el-select clearable style="margin: 0 20px;" v-model="cookbookType" placeholder="请选择用餐类型">
      <el-option
              v-for="item in cookbookTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
      </el-option>
    </el-select>
    <el-select clearable style="margin: 0 20px;" v-model="orderStatus" placeholder="请选择订单状态">
      <el-option
              v-for="item in orderStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
      </el-option>
    </el-select>
    <el-select clearable style="margin: 0 20px;" v-model="orderType" placeholder="请选择订单类型">
      <el-option
              v-for="item in orderTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
      </el-option>
    </el-select>
    <el-button @click="searchOrder" icon="el-icon-search" type="primary">搜索</el-button>
    <el-table v-loading="loading" :data="tableData" class="table">
      <el-table-column
          type="expand"
          width="50">
        <template slot-scope="scope">
          <el-table :data="scope.row.orderItemVos" border>
            <el-table-column
                prop="id"
                label="菜品ID"
                width="100">
            </el-table-column>
            <el-table-column
                prop="foodTitle"
                label="菜品名称"
                width="150">
            </el-table-column>
            <el-table-column
                prop="foodDesc"
                label="菜品描述"
                width="200">
            </el-table-column>
            <el-table-column
                prop="foodUnitPrice"
                label="菜品单价（元）"
                width="150">
            </el-table-column>
            <el-table-column
                prop="foodTotalPrice"
                label="菜品总价（元）"
                width="150">
            </el-table-column>
            <el-table-column
                prop="comment.tag"
                label="评价标签"
                width="100">
            </el-table-column>
            <el-table-column
                prop="comment.content"
                label="评价内容"
                width="350">
            </el-table-column>
            <el-table-column
                prop="comment.createTime"
                label="评价时间"
                width="200">
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
              prop="id"
              label="订单ID"
              width="100">
      </el-table-column>
      <el-table-column
              prop="eatTime"
              label="用餐日期"
              width="150">
      </el-table-column>
      <el-table-column
              prop="cookbookType"
              label="用餐类型"
              width="100">
        <template slot-scope="scope">
          {{getCookbookType(scope.row)}}
        </template>
      </el-table-column>
      <el-table-column
              prop="orderStatus"
              label="订单状态"
              width="100">
        <template slot-scope="scope">
          {{getOrderStatus(scope.row)}}
        </template>
      </el-table-column>
      <el-table-column
              prop="orderType"
              label="订单类型"
              width="100">
        <template slot-scope="scope">
          {{getOrderType(scope.row)}}
        </template>
      </el-table-column>
      <el-table-column
              prop="totalPrice"
              label="订单总价（元）"
              width="150">
      </el-table-column>
      <el-table-column
          prop="user.nickName"
          label="下单用户"
          width="100">
      </el-table-column>
      <el-table-column
              prop="createTime"
              label="下单时间"
              width="150">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注"
          width="500">
      </el-table-column>
    </el-table>
    <el-pagination
            @current-change="changePage"
            class="page"
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Order",
  data () {
    return {
      eatTime: '',
      cookbookType: '',
      orderStatus: '',
      orderType: '',
      loading: false,
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      cookbookTypeOptions: [{
        value: 1,
        label: '午餐'
      }, {
        value: 2,
        label: '晚餐'
      }],
      orderStatusOptions: [{
        value: 1,
        label: '已下单'
      }, {
        value: 2,
        label: '已取消'
      }, {
        value: 3,
        label: '已评价'
      }],
      orderTypeOptions: [{
        value: 1,
        label: '堂食'
      }, {
        value: 2,
        label: '外带'
      }],
    }
  },
  methods:{
    getCookbookType (row) {
      switch (parseInt(row.cookbookType)) {
        case 1:
          return '午餐'
        case 2:
          return '晚餐'
      }
    },
    getOrderStatus (row) {
      switch (parseInt(row.orderStatus)) {
        case 1:
          return '已下单'
        case 2:
          return '已取消'
        case 3:
          return '已评价'
      }
    },
    getOrderType (row) {
      switch (parseInt(row.cookbookType)) {
        case 1:
          return '堂食'
        case 2:
          return '外带'
      }
    },
    loadTableData () {
      this.loading = true
      this.$axios.get(`/order?eatTime=${this.eatTime}&cookbookType=${this.cookbookType}&orderStatus=${this.orderStatus}&orderType=${this.orderType}&pageNum=${this.pageNum}&pageSize=${this.pageSize}`).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    searchOrder () {
      this.pageNum = 1
      this.loadTableData()
    },
    changePage (pageNum) {
      this.pageNum = pageNum
      this.loadTableData()
    }
  },
  mounted() {
    this.loadTableData()
  }
}
</script>

<style lang="scss" scoped>
  .order {
    width: 100%;
    height: 100%;
    .table {
      width: 100%;
      margin-top: 20px;
    }
    .confirm {
      margin-left: 20px;
    }
    .page {
      margin: 20px 0;
    }
  }
</style>
